<template>
  <div>
    R：<input type="range" max="255" v-model="red"><span class="redText">{{ red }}</span> <br>
    G：<input type="range" max="255" v-model="green"><span class="greenText">{{ green }}</span> <br>
    B：<input type="range" max="255" v-model="blue"><span  class="blueText">{{ blue }}</span> <br>
    A：<input type="range" max="255" v-model="alpha"><span>{{ alpha }}</span>

    <div>
      <slot name="area">
        <div class="color"></div>
      </slot>
    </div>
    <p>{{ rgb }}</p>

    <wsl-button class="btn"></wsl-button>
  </div>
</template>

<script>
import WslButton from "@/components/basic/wsl-button/wsl-button";
export default {
  name: "palette",
  components: {WslButton},
  data() {
    return {
      red: 65,
      green: 158,
      blue: 255,
      alpha: 255,
      rgb: '#409EFFFF'
    }
  },
  methods: {
    ten2sixteen(val) {
      let a = parseInt(val), yu1, yu2, final
      if (a >= 0 && a <= 255) {
        if (a < 16) {
          yu1 = 0
          yu2 = a
        } else if (a >= 16) {
          yu2 = a % 16
          a = parseInt(a / 16)
          yu1 = a % 16
        }
      } else {
        return 'xx'
      }
      yu1 = this.character(yu1)
      yu2 = this.character(yu2)
      final = yu1 + yu2
      return final
    },
    character(num) {
      if (num === 10) return 'A'
      else if (num === 11) return 'B'
      else if (num === 12) return 'C'
      else if (num === 13) return 'D'
      else if (num === 14) return 'E'
      else if (num === 15) return 'F'
      else return num.toString()
    }
  },
  watch: {
    red(newValue) {
      let area = document.getElementsByClassName('color')[0]
      let rgb = '#' + this.ten2sixteen(newValue) + this.ten2sixteen(this.green) + this.ten2sixteen(this.blue) + this.ten2sixteen(this.alpha)
      this.rgb = rgb
      area.style.backgroundColor = rgb

      let text = document.getElementsByClassName('redText')[0]
      text.style.color='#'+this.ten2sixteen(newValue)+'0000FF'

      let btn = document.getElementsByClassName('btn')[0]
      btn.style.backgroundColor = rgb
    },
    green(newValue) {
      let area = document.getElementsByClassName('color')[0]
      let rgb = '#' + this.ten2sixteen(this.red) + this.ten2sixteen(newValue) + this.ten2sixteen(this.blue) + this.ten2sixteen(this.alpha)
      this.rgb = rgb
      area.style.backgroundColor = rgb

      let text = document.getElementsByClassName('greenText')[0]
      text.style.color='#00'+this.ten2sixteen(newValue)+'00FF'

      let btn = document.getElementsByClassName('btn')[0]
      btn.style.backgroundColor = rgb
    },
    blue(newValue) {
      let area = document.getElementsByClassName('color')[0]
      let rgb = '#' + this.ten2sixteen(this.red) + this.ten2sixteen(this.green) + this.ten2sixteen(newValue) + this.ten2sixteen(this.alpha)
      this.rgb = rgb
      area.style.backgroundColor = rgb

      let text = document.getElementsByClassName('blueText')[0]
      text.style.color='#0000'+this.ten2sixteen(newValue)+'FF'

      let btn = document.getElementsByClassName('btn')[0]
      btn.style.backgroundColor = rgb
    },
    alpha(newValue) {
      let area = document.getElementsByClassName('color')[0]
      let rgb = '#' + this.ten2sixteen(this.red) + this.ten2sixteen(this.green) + this.ten2sixteen(this.blue) + this.ten2sixteen(newValue)
      this.rgb = rgb
      area.style.backgroundColor = rgb
    }
  }
}
</script>

<style scoped>
.color {
  width: 100px;
  height: 100px;
  background-color: rgba(64, 158, 255, 255);
}
span{
  font-weight: 600;
}
.redText{
  color: rgba(64, 0, 0,255);
}
.greenText{
  color: rgba(0, 158, 0,255);
}
.blueText{
  color: rgba(0, 0, 255,255);
}
</style>